<template>
	<div class="blood_type">
		<div class="chart_title">{{chartItem.input_name_cus}}</div>
		<a-spin :spinning="spinning">
			<div :style="{height: chartHeight+'px'}" class="chart_con" id="bloodType"></div>
		</a-spin>
	</div>
</template>

<script>
	import {
		defineComponent,
		ref,
		computed,
		createVNode,
		onActivated,
		reactive,
		toRefs,
		nextTick
	} from "vue";
	import request from "../../../../common/utils/request";
	import {
		ExclamationCircleOutlined,
		PlusOutlined,
		DownOutlined,
	} from "@ant-design/icons-vue";
	import {
		Chart
	} from "@antv/g2";
	import store from "../../../../store";
	export default defineComponent({
		props: {
			chartItem: {
				type: Object,
				default: () => {return {}}
			},
			chartHeight: {
				type: Number,
				default: 310
			}
		},
		setup(props, context) {
			const state = reactive({
				chart: null,
				chartData: [],
				spinning: false
			})
			
			const getChartData = () => {
				state.spinning = true
				request.get('/village', '/org/personal/blood_type', {
					village_id: store.getters.buildingInfo.permissionBuildings[0].id
				}).then(res=> {
					state.chartData = res.result
					nextTick(() => {
						state.spinning = false
						renderChart()
					})
				})
			}

			const renderChart = () => {
				state.chart = new Chart({
					container: 'bloodType',
					autoFit: true
				});
				state.chart.data(state.chartData);
				let arr = state.chartData.map(item=>item.value*1)
				let maxNum = Math.max.apply(null,arr)
				state.chart.scale({
					value: {
						max: maxNum+1,
						min: 0,
						alias: ' ',
					},
				});
				state.chart.axis('title', {
					title: null,
					tickLine: null,
					line: null,
				});

				state.chart.axis('value', {
					label: null,
					title: {
						offset: 30,
						style: {
							fontSize: 12,
							fontWeight: 300,
						},
					}
				});
				state.chart.legend(false);
				state.chart.coordinate().transpose();
				state.chart
					.interval()
					.position('title*value')
					.size(26)
					.label('value', {
						style: {
							fill: '#8d8d8d',
						},
						offset: 10,
					})
					.color('title',["#B40F0F","#8D00A1","#BBE800","#6193FF","#004988"]);
				state.chart.legend({
					position: 'bottom',
					itemHeight: 30
				});
				state.chart.interaction('element-active');
				state.chart.render();
			}
			
			getChartData()

			return {
				...toRefs(state)
			}
		}
	})
</script>

<style lang="less" scoped>
	.blood_type {
		width: 100%;
		height: 100%;
		padding: 10px;
		background: #fff;
		
		.chart_title{
			padding: 5px 15px;
			width: 100%;
			border-bottom: 1px solid #eee;
			font-size: 20px;
		}
		
		.chart_con {
			width: 100%;
			height: 310px;
			padding: 10px 15px;
		}
	}
</style>